import { motion } from 'framer-motion';

interface StarRatingProps {
  rating: number;
  maxRating?: number;
  size?: number;
}

const StarRating = ({ rating, maxRating = 5, size = 20 }: StarRatingProps) => {
  return (
    <div className="flex items-center">
      {[...Array(maxRating)].map((_, i) => {
        const isFilled = i < rating;
        
        return (
          <motion.i
            key={i}
            initial={{ opacity: 0, scale: 0.5 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ 
              duration: 0.3, 
              delay: i * 0.1,
              type: "spring",
              stiffness: 300
            }}
            className={`fa-solid fa-star ${
              isFilled ? 'text-yellow-400' : 'text-gray-600'
            }`}
            style={{ fontSize: size, marginRight: 2 }}
          />
        );
      })}
    </div>
  );
};

export default StarRating;